<template>
    <div style="padding: 10px">
        <!--    搜索区域-->
        <div style="margin: 10px 0">
            <el-input v-model="search" placeholder="请输入订单编号" style="width: 20%" clearable></el-input>
            <el-button class="el_botton" type="primary" style="margin-left: 5px" @click="load">查询</el-button>
        </div>
        <el-table
                v-loading="loading"
                :data="tableData"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                border
                stripe
                style="width: 100%"
        >
            <el-table-column
                    width="70"
                    prop="id"
                    label="ID"
                    sortable="true"
            >
            </el-table-column>
            <el-table-column
                    prop="vaccineName"
                    label="疫苗名称">
            </el-table-column>
            <el-table-column
                    width="160"
                    prop="orderNo"
                    label="订单编号">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="接种人">
            </el-table-column>
            <el-table-column label="风险地区">
                <template #default="scope">
                    <el-tag v-if="scope.row.risk === 0" type="success" effect="plain" style="">否</el-tag>
                    <el-tag v-if="scope.row.risk === 1" type="danger"  effect="plain" style="">是</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态">
                <template #default="scope">
                    <span v-if="scope.row.status === 0" style="color: orange">未审核</span>
                    <span v-if="scope.row.status === 1" style="color: green">审核通过</span>
                    <span v-if="scope.row.status === 2" style="color: red">未通过审核</span>
                </template>
<!--                <template #default="scope">-->
<!--                    <el-switch v-model="scope.row.status"-->
<!--                               @change="updateStatus(scope.row)"-->
<!--                               active-color="#13ce66"-->
<!--                               inactive-color="#ff4949">-->
<!--                    </el-switch>-->
<!--                </template>-->
            </el-table-column>
            <el-table-column
                    width="150"
                    prop="orderTime"
                    label="接种时间">
            </el-table-column>
            <el-table-column
                    width="150"
                    prop="vaccinePlace"
                    label="接种地点">
            </el-table-column>
            <el-table-column label="审核意见" width="240">
                <template #default="scope">
                    <el-button type="success" icon="el-icon-check" circle @click="updateStatus(1,scope.row.id)"></el-button>
                    <el-button type="danger" icon="el-icon-close" circle @click="updateStatus(2,scope.row.id)"></el-button>
                </template>
<!--                <template #default="scope">-->
<!--                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">-->
<!--                        <template #reference>-->
<!--                            <el-button size="mini" type="danger">删除</el-button>-->
<!--                        </template>-->
<!--                    </el-popconfirm>-->
<!--                </template>-->
            </el-table-column>
        </el-table>

        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>


    import request from "@/utils/request";

    export default {
        name: 'Subscribe',
        components: {},
        data() {
            return {
                user: {},
                loading: true,
                form: {},
                dialogVisible: false,
                search: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
            }
        },
        created() {
            let userStr = sessionStorage.getItem("user") || "{}"
            this.user = JSON.parse(userStr)
            // 请求服务端，确认当前登录用户的 合法信息
            request.get("/user/" + this.user.id).then(res => {
                if (res.code === '0') {
                    this.user = res.data
                }
            })

            this.load()
        },
        methods: {
            updateStatus(status,id){
                window.console.log("状态",status,"id:",id)
                request.get("/vaccine_order/updateStatus", {
                    params: {
                        status:status,
                        id:id
                    }
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            type: "success",
                            message: "操作成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.load() // 刷新表格的数据
                })
            },
            load() {
                this.loading = true
                request.get("/vaccine_order", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res => {
                    this.loading = false
                    this.tableData = res.data.records
                    this.total = res.data.total
                })
            },
            add() {
                this.dialogVisible = true
                this.form = {}
                if (this.$refs['upload']) {
                    this.$refs['upload'].clearFiles()  // 清除历史文件列表
                }
            },
            save() {
                if (this.form.id) {  // 更新
                    request.put("/order", this.form).then(res => {
                        console.log(res)
                        if (res.code === '0') {
                            this.$message({
                                type: "success",
                                message: "更新成功"
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                        this.load() // 刷新表格的数据
                        this.dialogVisible = false  // 关闭弹窗
                    })
                } else {  // 新增
                    request.post("/order", this.form).then(res => {
                        console.log(res)
                        if (res.code === '0') {
                            this.$message({
                                type: "success",
                                message: "新增成功"
                            })
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }

                        this.load() // 刷新表格的数据
                        this.dialogVisible = false  // 关闭弹窗
                    })
                }
            },
            handleEdit(row) {
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogVisible = true
                this.$nextTick(() => {
                    if (this.$refs['upload']) {
                        this.$refs['upload'].clearFiles()  // 清除历史文件列表
                    }
                })

            },
            handleDelete(id) {
                console.log(id)
                request.delete("/order/" + id).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.load()  // 删除之后重新加载表格的数据
                })
            },
            handleSizeChange(pageSize) {   // 改变当前每页的个数触发
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {  // 改变当前页码触发
                this.currentPage = pageNum
                this.load()
            }
        }
    }
</script>
<style scoped>
    .el_botton{
        color: #fff;
        background-color: #5470c6;
        border-color: #5470c6;
    }
</style>

